import React from 'react'
import '../assets/css/cart.css'
import qsString from 'querystring'
import { SwipeAction, List } from 'antd-mobile';
import { Tabs, WhiteSpace } from 'antd-mobile';
import { NavBar, Icon } from 'antd-mobile';
import { cartList, cartDelete } from '../request/api'
class Home extends React.Component {
  constructor() {
    super()
    this.state = {
      cartlist: []
    }
  }
  componentDidMount() {
    // let query = this.props.location.search.slice('1')
    // query = qsString.parse(query)
    // this.setState({
    //   id: query.uid
    // })
    cartList(JSON.parse(sessionStorage.getItem('isLogin')).uid).then(res => {
      console.log(res, '购物车列表');
      if (res.data.code == 200) {
        this.setState({
          cartlist: res.data.list[1].content
        })
        console.log(this.state.cartlist);
      }
    })
  }
  delete(id) {
    cartDelete({ id }).then(res => {
      console.log(res.data.msg);
    })
    cartList(JSON.parse(sessionStorage.getItem('isLogin')).uid).then(res => {
      console.log(res, '购物车列表');
      if (res.data.code == 200) {
        this.setState({
          cartlist: res.data.list[1].content
        })
        console.log(this.state.cartlist);
      }
    })
  }
  render() {
    const tabs = [
      { title: '综合推荐' },
      { title: '销量' },
      { title: '价格' },
      { title: '好评度' },
      { title: '店铺' },
      { title: '分类' },
    ];
    const { cartlist } = this.state
    return (<div id='ld'>
      <NavBar
        className='NavBar'
        icon={<Icon type="left" />}
        onLeftClick={() => console.log('onLeftClick')}
        rightContent={[
          <Icon key="1" type="ellipsis" />,
        ]}
      >购物车</NavBar>
      <div>
        <WhiteSpace />
        <Tabs tabs={tabs} initialPage={0}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', backgroundColor: '#fff' }}>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', backgroundColor: '#fff' }}>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', backgroundColor: '#fff' }}>
          </div>
        </Tabs>
        <WhiteSpace />
      </div>
      <div>
        <input className='ra' type="radio" />
        <span>小u自营</span>
        <span className='k'>已免运费</span>
        <span className='l'>领券</span>
      </div>
      {
        cartlist.map(item => {
          return <List key={item.id}>
            <SwipeAction
              style={{ backgroundColor: 'gray' }}
              autoClose
              right={[
                {
                  text: '删除',
                  onPress: () => this.delete(item.id),
                  style: { backgroundColor: '#F4333C', color: 'white' },
                },
              ]}
              onOpen={() => console.log('global open')}
              onClose={() => console.log('global close')}
            >
              <List.Item
                onClick={e => console.log(e)}
              >
                <div className='li'>
                  <input className='inp' type="checkbox" />
                  <img className='img' src={item.img} alt="" />
                  <div>
                    <span className='span'>限时</span>
                    <span>{item.goodsname}</span>
                    <p>今日附近793人在买</p>
                    <div className='div'>
                      <div>
                        <span className='q'>￥{item.price}</span>
                      </div>
                      <div>
                        <button className='btn'>-</button>
                        <span className='a'>1</span>
                        <button>+</button>
                      </div>
                    </div>
                  </div>
                </div>
              </List.Item>
            </SwipeAction>

          </List>
        })
      }

      <div className='z'>
        <input className='ra' type="radio" />
        <span>全选</span>
        <span className='b'>合计</span>
        <span className='c'>￥1998.00</span>
        <button className='bt'>去结算</button>
      </div>
      <div className='z'>

      </div>
      <div className='kb'>

      </div>

    </div>)
  }
}
export default Home